//给页面绑定滑轮滚动事件
export const onZoom = function (e) {
  eX = e.x;
  eY = e.y;
  e.preventDefault();

  if (window.scrollTimer) return;
  // 如果有需要阻止默认事件或事件冒泡的可以打开
  // e.preventDefault();
  // e.stopPropagation();
  window.scrollTimer = setTimeout(() => {
    e = e || window.event;
    var isGoDown = true;
    if (e.wheelDelta) {
      //第一步：先判断浏览器IE，谷歌滑轮事件
      if (e.wheelDelta > 0) {
        //当滑轮向上滚动时
        isGoDown = false;
      }
    } else if (e.detail) {
      //Firefox滑轮事件
      if (e.detail < 0) {
        //当滑轮向下滚动时
        isGoDown = false;
      }
    }
    if (isGoDown) {
      //向下滚动，执行放大元素
      zoomInFn();
    } else {
      //向上滚动，执行缩小元素
      zoomOutFn();
    }
    setDivScale();
    clearTimeout(window.scrollTimer);
    window.scrollTimer = null;
  }, 100);
};

export default {
  setZoomTrigger: (trigger) => {
    ele = trigger;
  },
  setDragTrigger: (trigger) => {
    dragEle = trigger;
  },
};
var ele, dragEle;
var eX;
var eY;
//设定元素元大小为100；
var zoom = 100;
//缩小
var zoomInFn = function () {
  zoom -= 20;
  if (zoom < 50) {
    zoom = 50;
  }
};
//放大
var zoomOutFn = function () {
  zoom += 20;
  if (zoom > 300) {
    zoom = 300;
  }
};
//设置元素放大倍率样式
var setDivScale = function () {
  var scale = zoom / 100;
  if (scale < 0.2) scale = 0.2;
  if (scale > 2) scale = 2;
  ele.$el.style.transform = " scale(" + scale + ")";
  ele.$el.style.transformOrigin = `${eX}px ${eY}px`;
};

var clickPoint = { x: 0, y: 0 };
var allowDrag = false;
export const onDragMouseDown = function (e) {
  clickPoint.x = e.x;
  clickPoint.y = e.y;
  allowDrag = true;
  let point = dragEle.style.transform
    .replace(/translate\(/, "")
    .replace(/\)/, "")
    .replace(/px/g, "")
    .replace(/ /g, "")
    .split(",");

  if (point.length == 2) {
    clickPoint.x = clickPoint.x - parseInt(point[0]);
    clickPoint.y = clickPoint.y - parseInt(point[1]);
  } else {
    clickPoint.x = clickPoint.x;
    clickPoint.y = clickPoint.y;
  }
};
export const onDragMouseUp = function (e) {
  allowDrag = false;
  e.target.style.cursor = `grab`;
};
export const onDragMouseMove = function (e) {
  e.preventDefault();
  if (allowDrag) {
    dragEle.style.transform = `translate(${e.x - clickPoint.x}px,${
      e.y - clickPoint.y
    }px)`;
    e.target.style.cursor = `grabbing`;
  }
};
